<template>
  <div :class="{ 'flex-wrap': columns.length > 1 }" :style="{ height: showAreaMaxHeight + 'px' }" class="tag-item">
    <template v-for="(item, index) in columns">
      <div v-if="getHide(index)" :key="item" :style="itemStyle" class="item-wrap">
        <p :style="getTitleStyle()" class="item-header">{{ item }}</p>
        <p :style="getContentStyle()" class="item-value">
          <el-tooltip :content="getValue(index, false)+getunit(index)" placement="top">
            <span class="inner-num">{{ getValue(index, true) }}{{ getunit(index) }}</span>
          </el-tooltip>
        </p>
        <p v-if="getContrastValue(index, 'monthOnMonthData') || (monthOnMonthTitle && monthOnMonthTitle[index])" :style="contentColor" class="item-contrast">
          <span class="title">{{ monthOnMonthTitle[index] }}</span>
          <i v-if="getContrastValue(index, 'monthOnMonthData') < 0" class="icon el-icon-bottom" />
          <i v-else-if="getContrastValue(index, 'monthOnMonthData')" class="icon el-icon-top" />
          <span v-if="getContrastValue(index, 'monthOnMonthData') || getContrastValue(index, 'monthOnMonthData') === 0" class="value">{{ getContrastValue(index, 'monthOnMonthData') }}%</span>
          <span v-else class="value">--</span>
        </p>
        <p v-if="getContrastValue(index, 'yearOnYearData') || (yearOnYearTitle && yearOnYearTitle[index])" :style="contentColor" class="item-contrast">
          <span class="title">{{ yearOnYearTitle[index] }}</span>
          <i v-if="getContrastValue(index, 'yearOnYearData') && getContrastValue(index, 'yearOnYearData') < 0" class="icon el-icon-bottom"/>
          <i v-else-if="getContrastValue(index, 'yearOnYearData')" class="icon el-icon-top"/>
          <span v-if="getContrastValue(index, 'yearOnYearData') || getContrastValue(index, 'yearOnYearData') === 0" class="value">{{ getContrastValue(index, 'yearOnYearData') }}%</span>
          <span v-else class="value">--</span>
        </p>
      </div>
    </template>
  </div>
</template>

<script>
import { isNumber } from '@/utils/tools';
import { numberTextFormat, moneyFilter } from '@/filters/number.js';
export default {
  name: 'TagItemModule',
  props: {
    showAreaMaxHeight: {
      type: Number,
      default: 100
    },
    moduleItemData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    columns: {
      type: Array,
      default: () => []
      // default: () => ['日期', '访问用户', '下单用户', '下单率']
    },
    rows: {
      type: Array,
      default: () => []
      // columnsDataType true时传入格式
      // default: () => [['1/1', 1393, 5000, 50], ['1/2', 500, 4000, 32]]
      // columnsDataType false时传入格式
      // default: () => [
      //   {
      //     '日期': '1/1',
      //     '访问用户': 1393,
      //     '下单用户': 1093,
      //     '下单率': 0.32
      //   }, {
      //     '日期': '1/2',
      //     '访问用户': 3530,
      //     '下单用户': 3230,
      //     '下单率': 0.26
      //   }]
    }
  },
  computed: {
    monthOnMonthData() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.monthOnMonthData || [] : [];
    },
    yearOnYearData() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.yearOnYearData || [] : [];
    },
    monthOnMonthTitle() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.monthOnMonthTitle || [] : [];
    },
    yearOnYearTitle() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.yearOnYearTitle || [] : [];
    },
    styleConfig() {
      return this.moduleItemData.styleConfig;
    },
    tagsData() {
      return this.moduleItemData.tags || [];
    },
    values() {
      return this.rows && this.rows.length > 0 ? this.rows[0] : [];
    },
    itemStyle() {
      return {
        width: (95 / this.columns.length) + '%'
      };
    },
    contentColor() {
      if (!this.styleConfig.tagContent) return '';
      const tagContent = this.styleConfig.tagContent;
      return `color: ${tagContent.color};`;
    }
  },
  methods: {
    getHide(index) {
      let hideTag = true;
      if (this.moduleItemData.tags && this.moduleItemData.tags[index] && this.moduleItemData.tags[index].hideTag === 1) {
        hideTag = false;
      }
      return hideTag;
    },
    getunit(index) {
      if (!this.moduleItemData.tags) return '';
      const tagsItem = this.moduleItemData.tags[index];
      if (tagsItem && tagsItem.tagType === 1 && tagsItem.unit) {
        return tagsItem.unit;
      }
      return '';
    },
    getValue(index, format = true) {
      let value = index < this.values.length ? this.values[index] : null;
      const editTargetObj = this.getTarget(index);
      let tail = '';
      if (editTargetObj.editTarget && (value || value === 0) && isNumber(value)) {
        if (editTargetObj.targetData) {
          value = ((value / editTargetObj.targetData) * 100).toFixed(1);
        } else {
          value = 100;
        }
        tail = '%';
        return value + tail;
      }
      if (format) {
        const ans = value || isNumber(value) ? moneyFilter(numberTextFormat(value, 1), false) : '--';
        return ans + tail;
      } else {
        let ans = value || isNumber(value) ? moneyFilter(value, false) : (value || '--');
        if (tail === '%') {
          ans = moneyFilter(ans);
        }
        return ans + tail;
      }
    },
    getTarget(index) {
      if (this.tagsData && this.tagsData[index]) {
        return {
          editTarget: this.tagsData[index].editTarget || 0,
          targetData: this.tagsData[index].targetData || 0
        };
      }
      return {
        editTarget: 0,
        targetData: 0
      };
    },
    getContrastValue(index, type) {
      if (this[type] && (this[type][index] || this[type][index] === 0)) {
        return this[type][index];
      }
      return null;
    },
    textColor(index, type) {
      if (this.getContrastValue(index, type) < 0) {
        return { color: 'green' };
      } else if (this.getContrastValue(index, type)) {
        return { color: 'red' };
      }
      return {};
    },
    /**
     * 自定义样式处理
     */
    getTitleStyle() {
      const styleConfig = this.styleConfig;
      let styleObj = {};
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTitleSy();
      } else if (styleConfig && styleConfig instanceof Object) {
        styleObj = { ...styleConfig.tagTitle };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },
    getContentStyle() {
      const styleConfig = this.styleConfig;
      let styleObj = {};
      if (styleConfig && styleConfig instanceof Object) {
        styleObj = { ...styleConfig.tagContent };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },
    moduleTitleSy() {
      const moduleTitleStyle = {};
      this.styleConfig.map(item => {
        if (item.title === '标题名称：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            moduleTitleStyle[val.word] = val.value;
          });
        }
      });
      return moduleTitleStyle;
    }
  }
};
</script>

<style lang="scss" scoped>
  .tag-item {
    display: flex;
    /*align-items: center;*/
    &.space-around {
      justify-content: space-around;
    }
    &.flex-wrap {
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
    }
    .item-wrap {
      margin: -32px 0 32px -32px;
      padding: 32px 0 0 32px;
      min-width: 212px;
    }
    .item-header {
      font-size:20px;
      font-weight: bolder;
      color:rgba(153,153,153,1);
      // padding: 0 8px;
      margin: 0;
      // border-left: 4px solid rgba(64,110,255,1);
    }
    .item-value {
      font-size: 32px;
      font-weight:500;
      color:rgba(51,51,51,1);
      margin: 8px 0 0 0;
    }
    .item-contrast {
      margin: 0;
      display: flex;
      align-items: center;
      margin-top: 5px;
      .title {
        font-size: 13px;
        white-space: nowrap;
      }
      .icon {
        font-size: 14px;
        margin-left: 5px;
        position: relative;
        top: 1px;
      }
      .value {
        margin-left: 5px;
        font-size: 13px;
      }
    }
  }
  .inner-num {
    display: inline-block;
  }
</style>
